<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        body{
            background-color: pink;
        }
        #nav{
            width: 900px;
            height: 63px;
            background: #fff url('./img/doubleOne.png') no-repeat right center;
            margin: 100px auto;
            border-radius: 5px;

            position: relative;
        }
        #nav ul{
            position: relative;
        }
        #nav ul li{
            float: left;
            width: 88px;
            height: 63px;
            text-align: center;
            line-height: 70px;
        }
        #t_mall{
            width: 88px;
            height: 63px;
            background: url("./img/tMall.png") no-repeat;
            position: absolute;
            left: 0;
            top: 0;

        }
    </style>
</head>
<body>
    <nav id="nav">
        <span id="t_mall" ></span>
        <ul  id="ul">
            <li>双11狂欢</li>
            <li>服装会场</li>
            <li>数码家电</li>
            <li>家具建材</li>
            <li>母婴童装</li>
            <li>手机会场</li>
            <li>美妆会场</li>
            <li>进口会场</li>
            <li>飞猪旅行</li>
        </ul>
    </nav>
    <script>
        window.addEventListener('load',function(){
            let begin = 0,end = 0;
            //缓动动画
            setInterval(function(){
                begin += (end-begin) * 0.2;//0.2为缓动系数
                $('t_mall').style.left = begin + 'px';
            },10)

            //记录鼠标产生位置的值
            let beginX=0;

            //1、遍历所有的li标签
            let allLis = $('ul').children;
            for(let i = 0;i<allLis.length;i++){
                let li = allLis[i];

                //2、监听鼠标进入

                li.addEventListener('mouseenter',function(){
                    end = this.offsetLeft;
                })
                //4、监听鼠标离开
                li.addEventListener('mouseout',function(){
                    end = beginX;
                })

                //4、监听鼠标按下
                li.addEventListener('mousedown',function(){
                    beginX = this.offsetLeft;
                })
            }
           
        });
        function $(id){
            return typeof id === 'string' ? document.getElementById(id) : null; 
        }
    </script>
</body>
</html>